<template>
    <div class="app-container">
      <el-row>
        <el-col :span="20">
          <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
            <el-form-item label="所属栏目">
              <treeselect
                style="width: 240px;"
                v-model="queryParams.menu_id"
                :options="menuOptions"
                :normalizer="normalizer"
                :show-count="true"
                placeholder="选择所属栏目"
              />
            </el-form-item>

            <el-form-item label="文章标题" prop="art_name">
              <el-input
                v-model="queryParams.art_name"
                placeholder="请输入文章标题"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>

        <el-col :span="4">
          <div class="rightBox">
            <el-button type="primary" plain icon="el-icon-plus" @click="handleAdd">新增</el-button>
          </div>
        </el-col>
      </el-row>

      <el-table v-loading="loading" :data="list" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column type="index" label="序号" width="55" align="center" />
        <el-table-column label="文章标题" align="center" prop="art_name" />
        <el-table-column label="所属栏目" align="center" width="150" prop="menu_name" />
        <el-table-column label="封面图片" align="center" prop="art_face" :show-overflow-tooltip="true">
           <template slot-scope="scope">
             <el-tag>{{scope.row.art_face}}</el-tag>
           </template>
        </el-table-column>
        <el-table-column label="创建人" width="120" align="center" prop="createBy" :show-overflow-tooltip="true" />
        <el-table-column label="创建时间" width="160" align="center" prop="createTime" :show-overflow-tooltip="true" />
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
        <artForm v-if="open" :keyValue="keyValue" @showList="showList"></artForm>
      </el-dialog>

    </div>
</template>

<script>
    import { listArticle, delArticle } from '@/api/base/article';
    import { listMenu } from '@/api/base/menu';
    import artForm from "./form";
    import Treeselect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    export default {
        name: "index",
        components:{
          artForm, Treeselect
        },
        data() {
          return {
            loading: false,
            open: false,
            title: '新增文章',
            keyValue: '',
            menuOptions: [],
            list: [],
            total: 0,
            queryParams:{
              art_name: '',
              menu_id: 0,
              pageNum: 1,
              pageSize: 10,
            }
          }
        },
        created() {
          this.getList();
          this.getAllMenu();
        },
        methods: {
            getList() {
              listArticle(this.queryParams).then(res=>{
                this.list = res.rows;
                this.total = res.total;
              })
            },
            handleSelectionChange(val) {

            },
            showList() {
                this.open = false;
                this.queryParams.pageNum = 1;
                this.getList();
            },
            handleUpdate(val) {
              this.title = '修改文章';
              this.keyValue = val.art_id;
              this.open = true;
            },
            handleAdd() {
              this.keyValue = null;
              this.open = true;
            },
            handleDelete(val) {
              this.$modal.confirm('是否确认删除吗？').then(function() {
                return delArticle(val.art_id);
              }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
              }).catch(() => {});
            },
            // 获取所有栏目
            getAllMenu() {
              listMenu().then(res=>{
                const menu = { menu_id: 0, menu_name: '主栏目', children: [] };
                menu.children = this.handleTree(res.data, "menu_id");
                this.menuOptions.push(menu);
              });
            },
            handleQuery() {
              this.queryParams.pageNum = 1;
              this.getList();
            },
            /** 转换菜单数据结构 */
            normalizer(node) {
              if (node.children && !node.children.length) {
                delete node.children;
              }
              return {
                id: node.menu_id,
                label: node.menu_name,
                children: node.children
              };
            },
          }
    }
</script>

<style scoped>

</style>
